<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:url value="/resources/jQuery/jquery-1.7.2.min.js" var="jquery"/>
<c:url value="/resources/jQuery/jquery-ui-1.8.21.custom.min.js" var="jqueryUI"/>
<c:url value="/resources/css/cupertino/jquery-ui-1.8.21.custom.css" var="jQueryCSS" />
<c:url value="/resources/jQuery/jquery-ui-timepicker-addon.js" var="jQueryTime" />


<script type="text/javascript" src="${jquery}" ></script>
<script type="text/javascript" src="${jqueryUI}" ></script>
<script type="text/javascript" src="${jQueryTime}" ></script>
<link type="text/css" href="${jQueryCSS}" rel="Stylesheet" />

<script type="text/javascript">
	 $(document).ready(function(){
		 $('#homeTeamID').prop( 'selectedIndex', 0);
		 $('#awayTeamID').prop( 'selectedIndex', 0);
		 $('#locationID').prop( 'selectedIndex', 0);

		 $( "#date" ).datetimepicker();
		 $( "#submitButton" ).click(function(){
			 var homeTeamID = $('#homeTeamID').val();
			 var awayTeamID = $('#awayTeamID').val();
			 var locationID = $('#locationID').val();
			 var gameDate = $('#date').val();
			 $.ajax({
         	        type: "POST",
				 	        url: "../game/addGame.html?league=${league.encodedName}",
				 	        data: "homeTeamID=" + homeTeamID + "&awayTeamID=" + awayTeamID + "&locationID=" + locationID + "&gameDate=" + gameDate,
				 	        success: function(response){
				 	            // we have the response
				 	            if(response.status == "PASS"){
				 	            	$("#createGameForm").dialog('close');
				 	                alert(response.result);
				 	                window.location.reload();
				 	             }else{
				 	                 errorInfo = "";
				 	                 for(i =0 ; i < response.result.length ; i++){
				 	                     errorInfo += "" + (i + 1) +". " + response.result[i];
				 	                 }
				 	                 alert(errorInfo);
				 	             }
				 	         },
				 	         error: function(e){
				 	             alert('Error creating game.  Check server log for details.');
				 	         }
			 });
			 return false; 
		 });
	 });
</script>
<style>

.error {
    color:red;
}

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

</style>

<div id="createGameForm" style="display:none">
    
  <table>
    <tr>
        <td><label>Home Team</label></td>
        <td>
          <select id="homeTeamID">
            <option value="-1">--- Select ---</option>
            <c:forEach items="${teams}" var="team">
              <option value="${team.teamID}">${team.name }</option>
            </c:forEach>
          </select>
        </td>
    </tr>
    <tr>
        <td><label>Away Team</label></td>
        <td><select id="awayTeamID">
            <option value="-1">--- Select ---</option>
            <c:forEach items="${teams}" var="team">
              <option value="${team.teamID}">${team.name }</option>
            </c:forEach>
            </select>
    </tr>     
    <tr>
        <td><label>Location</label></td>
        <td><select id="locationID">
              <option value="-1">--- Select ---</option>
            <c:forEach items="${locations}" var="local">
              <option value="${local.locationID}">${local.fullAddress }</option>
            </c:forEach>
            </select>
            </td>
    </tr>
    <tr>
        <td><label>Game Date</label></td>
        <td><input id="date"/></td>
    </tr>
    <tr>
        <td colspan="2">
            <input id="submitButton" type="submit" value="Create Game"/>
        </td>
    </tr>
</table> 
</div>